
import React from 'react'
import {Form,Input,Button,Row,Col, message  } from 'antd'
import { useRef, useEffect } from 'react';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {Link, useNavigate} from 'react-router-dom'
import { reg } from '../utils/validate';
import { ajax } from './../api/index';
import { useLocation } from 'react-router-dom';

export default function LgName() {
    
    const navigate = useNavigate()
    const location:any  = useLocation()
    const myform:any = useRef()
    const [form] = Form.useForm()
    const onFinishFailed = ()=>{
        message.error("请输入正确的登录信息")
    }

    interface User{
        username:string,
        password:string
    }
    const onFinish = async (value:User)=>{
        console.log(value)
        let {code,token,result } = await ajax.adminLogin(value)
        if(code==200){
            sessionStorage.setItem("token",token )
            localStorage.setItem("username",value.username)
            // 跳转
            navigate('/main')
        }
    }
    const layout = {
        labelCol:{
            span:5
        },
        wrapperCol:{
            span:18
        }
    }
    const layout2={
        labelCol:{
            span:0,
        },
        wrapperCol:{
            offset:5,
            span:18
        }
    }

    useEffect(()=>{
        const username = new URLSearchParams(location.search).get("username")
        if(username){
            form.setFieldsValue({'username':username})
        }else{
            form.setFieldsValue({'username':localStorage.getItem('username')})
        }
        
    },[])
    return (
        <Form
            name="normal_login"
            className="myform"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            ref={myform}
            form={form}
            {...layout}
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[{ required: true, message: '请输入用户名' }]}
            >
                <Input prefix={<UserOutlined className="form-icon"  style={{color:"#999"}} />} placeholder="用户名" />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[
                    { required: true, message: '请输入密码' },
                    {pattern:reg.pwd, message:'请输入6-16的数字+字母组合的密码'}
                ]}
            >
                <Input prefix={<LockOutlined className="form-icon"  style={{color:"#999"}} />} placeholder="密码" />
               
            </Form.Item>
            <Form.Item className="lastbtns" {...layout2} >
                <Row>
                    <Col span={11} offset={0}>
                        <Button type="primary" htmlType="submit" className="login-form-button"  style={{width:'100%'}}>
                            登录
                        </Button>
                    </Col>
                    <Col span={11} offset={2}>
                        <Button danger htmlType="reset" className="login-form-button" style={{width:'100%'}}>
                            重置
                        </Button>
                    </Col>
                </Row>
            </Form.Item>
            <Form.Item className="lastbtns" {...layout2} >
                <div className="btns" >
                    <Link to="/register"  className='litem '>注册</Link>
                    <Link to="/forgetpass"  className='litem bg' >忘记密码</Link>
                </div>
            </Form.Item>
        </Form>
    )
}